<template>
  <div class="behavior-management">
    <a-card title="行为管理" :bordered="false">
      <template #extra>
        <GuideWrapper
          guide-type="behavior-management"
          title="行为管理使用指南"
          button-text="使用指南"
        />
      </template>

      <a-tabs v-model:activeKey="activeTab" type="card">
        <!-- 行为定义管理 -->
        <a-tab-pane key="definitions" tab="行为定义">
          <BehaviorDefinitionPanel
            :resource-id="resourceId"
            :resource-type="resourceType"
            @behavior-created="handleBehaviorCreated"
            @behavior-updated="handleBehaviorUpdated"
          />
        </a-tab-pane>

        <!-- 行为执行管理 -->
        <a-tab-pane key="executions" tab="行为执行">
          <BehaviorExecutionPanel
            :resource-id="resourceId"
            :resource-type="resourceType"
            @execution-updated="handleExecutionUpdated"
          />
        </a-tab-pane>

        <!-- 补偿管理 -->
        <a-tab-pane key="compensations" tab="补偿管理">
          <CompensationManagementPanel
            :resource-id="resourceId"
            :resource-type="resourceType"
            @compensation-triggered="handleCompensationTriggered"
          />
        </a-tab-pane>

        <!-- 行为编排 -->
        <a-tab-pane key="orchestrations" tab="行为编排">
          <BehaviorOrchestrationPanel
            :resource-id="resourceId"
            :resource-type="resourceType"
            @orchestration-executed="handleOrchestrationExecuted"
          />
        </a-tab-pane>

        <!-- 行为监控 -->
        <a-tab-pane key="monitoring" tab="行为监控">
          <BehaviorMonitoringPanel
            :resource-id="resourceId"
            :resource-type="resourceType"
            @alert-resolved="handleAlertResolved"
          />
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { message } from 'ant-design-vue';
import BehaviorDefinitionPanel from './BehaviorDefinitionPanel.vue';
import BehaviorExecutionPanel from './BehaviorExecutionPanel.vue';
import CompensationManagementPanel from './CompensationManagementPanel.vue';
import BehaviorOrchestrationPanel from './BehaviorOrchestrationPanel.vue';
import BehaviorMonitoringPanel from './BehaviorMonitoringPanel.vue';
import GuideWrapper from '../../guides/GuideWrapper.vue';

// Props
interface Props {
  resourceId: string;
  resourceType: string;
}

const props = defineProps<Props>();

// 响应式数据
const activeTab = ref('definitions');

// 事件处理
const handleBehaviorCreated = (behavior: any) => {
  message.success('行为定义创建成功');
  console.log('行为定义创建:', behavior);
};

const handleBehaviorUpdated = (behavior: any) => {
  message.success('行为定义更新成功');
  console.log('行为定义更新:', behavior);
};

const handleExecutionUpdated = (execution: any) => {
  message.success('行为执行状态更新');
  console.log('行为执行更新:', execution);
};

const handleCompensationTriggered = (compensation: any) => {
  message.success('补偿执行已触发');
  console.log('补偿执行:', compensation);
};

const handleOrchestrationExecuted = (orchestration: any) => {
  message.success('行为编排执行成功');
  console.log('行为编排执行:', orchestration);
};

const handleAlertResolved = (alert: any) => {
  message.success('告警已解决');
  console.log('告警解决:', alert);
};
</script>

<style lang="less" scoped>
.behavior-management {
  .ant-tabs-content {
    min-height: 400px;
  }
}
</style>
